<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改设备管理')"/>
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content pt-md">
    <form class="form-horizontal" id="form-device-edit">
        <input name="deviceId" th:field="${gyDevice.deviceId}" type="hidden">
        <input name="filePath" type="hidden" id="filePath" th:field="${gyDevice.filePath}"/>
        <input name="fileName" type="hidden" id="fileName" th:field="${gyDevice.fileName}"/>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备名称：</label>
            <div class="col-sm-8">
                <input name="deviceName" class="form-control" maxlength="50" th:field="${gyDevice.deviceName}" required
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备种类：</label>
            <div class="col-sm-8">
                <select name="deviceType" readonly="readonly" class="form-control type"
                        th:with="type=${@dict.getType('gy_device_type')}" required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="${gyDevice.deviceType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备状态：</label>
            <div class="col-sm-8">
                <select name="deviceStatus" class="form-control type"
                        th:with="type=${@dict.getType('gy_device_status')}" required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="${gyDevice.deviceStatus}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">所属学院：</label>
            <div class="col-sm-8">
                <select name="locationId"   readonly="readonly" class="form-control"
                        th:with="type=${@dict.getType('gy_locations')}" required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}" th:field="${gyDevice.locationId}"></option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">设备所在位置：</label>
            <div class="col-sm-8">
                <input name="location" class="form-control" maxlength="50" th:field="${gyDevice.location}" required
                       type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">设备图片：</label>
            <div class=" col-sm-8">
                <input type="file" name="file"  id="imgUpload" class="imgFile form-control">
                <span class="help-block m-b-none">导入的文件大小请不要超过10M；</span>
            </div>

        </div>

        <!--arm -->
        <div id="arm">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">转速：</label>
                <div class="col-sm-8">
                    <input name="rev" class="form-control" th:field="${armParam.rev}" type="number" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">1轴：</label>
                <div class="col-sm-8">
                    <input name="one" class="form-control" th:field="${armParam.one}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">2轴：</label>
                <div class="col-sm-8">
                    <input name="two" class="form-control" th:field="${armParam.two}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">3轴：</label>
                <div class="col-sm-8">
                    <input name="three" class="form-control" th:field="${armParam.three}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">4轴：</label>
                <div class="col-sm-8">
                    <input name="four" class="form-control" th:field="${armParam.four}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">5轴：</label>
                <div class="col-sm-8">
                    <input name="five" class="form-control" th:field="${armParam.five}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">6轴：</label>
                <div class="col-sm-8">
                    <input name="six" class="form-control" th:field="${armParam.six}" type="number">
                </div>
            </div>
        </div>
        <!--arm -->

        <!-- machine -->
        <div id="machine">
            <div class="form-group">
                <label class="col-sm-3 control-label">产量：</label>
                <div class="col-sm-8">
                    <input name="production" class="form-control" th:field="${machineParam.production}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">循环节拍：</label>
                <div class="col-sm-8">
                    <input name="loopMeter" class="form-control" th:field="${machineParam.loopMeter}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">X轴电机温度：</label>
                <div class="col-sm-8">
                    <input name="xMotoTemperature" class="form-control" th:field="${machineParam.xMotoTemperature}"
                           type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">X轴电机负载：</label>
                <div class="col-sm-8">
                    <input name="xMotoLoad" class="form-control" th:field="${machineParam.xMotoLoad}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主轴电机温度：</label>
                <div class="col-sm-8">
                    <input name="justfyMotoTemperature" class="form-control"
                           th:field="${machineParam.justfyMotoTemperature}" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主轴电机负载：</label>
                <div class="col-sm-8">
                    <input name="justfyMotoLoad" class="form-control" th:field="${machineParam.justfyMotoLoad}"
                           type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">加工时间：</label>
                <div class="col-sm-8">
                    <input name="processTime" placeholder="请填写秒数" th:field="${machineParam.processTime}"
                           class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">切削时间：</label>
                <div class="col-sm-8">
                    <input name="cutTime" class="form-control" th:field="${machineParam.cutTime}" placeholder="请填写秒数"
                           type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">开机时间：</label>
                <div class="col-sm-8">
                    <input name="startTime" class="form-control" th:field="${machineParam.startTime}"
                           placeholder="请填写秒数" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">运行时间：</label>
                <div class="col-sm-8">
                    <input name="runTime" class="form-control" th:field="${machineParam.runTime}"  placeholder="请填写秒数" type="number">
                </div>
            </div>


        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js" />

<script th:inline="javascript">
    var prefix = ctx + "gy/device";
    var deviceType = [[${gyDevice.deviceType}]];
    $("#form-device-edit").validate({
        focusCleanup: true
    });

    var fileUrl= [[${gyDevice.filePath}]];
    var file_name= [[${gyDevice.fileName}]];
    function initialPreviewConfig() {
        var ext = fileUrl.substr(fileUrl.lastIndexOf('.') + 1)
        var extType = 'object'

        if (/(pdf)$/i.test(ext)) {
            extType = 'pdf'
        }

        if (/(bmp|gif|jpg|jpeg|png)$/i.test(ext)) {
            extType = 'image'
        }

        return [
            {
                type: extType,
                size: 8000,
                caption: file_name,
                filename: file_name,
                url: fileUrl,
                key: "123"
            },
        ]
    }
    $(function () {

        $("#machine").hide();
        $("#arm").hide();
        $("#common").hide();
        if (deviceType == "72") {
            $("#arm").show();
            $("#common").show();
            $("#machine").hide();
        } else if (deviceType == "98") {
            $("#machine").show();
            $("#common").show();
            $("#arm").hide();
        } else {
            $("#machine").hide();
            $("#arm").hide();
            $("#common").hide();
        }
        $('.type').on('change', function () {
            //获取所有文本内容
            var text = $(".type").text();
            //获取选中的文本值
            var selectedText = $(".type").find("option:selected").text();
            //获取选中的value值
            var value = $(".type").val();
            //获取选中的option的索引值
            var index = $(".type").get(0).selectedIndex;
            console.log(text);
            console.log("selectedText:" + selectedText);
            console.log("value:" + value);
            console.log(index);
            if (value == "72") {
                $("#arm").show();
                $("#common").show();
                $("#machine").hide();
            } else if (value == "98") {
                $("#machine").show();
                $("#common").show();
                $("#arm").hide();
            } else {
                $("#machine").hide();
                $("#arm").hide();
                $("#common").hide();
            }
        });


        // 单图上传
        $("#singleFile").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            console.log('fs')
            var rsp = data.response;
            log.info("return url：" + rsp.url)
            log.info("reutrn fileName：" + rsp.fileName)
            log.info("reutrn newFileName：" + rsp.newFileName)
            log.info("return originalFilename：" + rsp.originalFilename)
        }).on('fileremoved', function (event, id, index) {
            console.log("fileremoved")
            $("input[name='" + event.currentTarget.id + "']").val('')
        })


        // ------------------
        $("#imgUpload")
            .fileinput({
                language: "zh", //设置语言
                uploadUrl:ctx + 'common/upload', //上传的地址
                allowedFileExtensions: ["jpg", "png", "jpeg", "bmp","xls", "doc", "docx","ppt","zip","txt", "pdf"], //接收的文件后缀
                theme: "fa",      // 主题设置
                initialPreview: fileUrl,        // 初始预览区域显示的图片
                initialPreviewAsData: true,
                initialPreviewConfig:initialPreviewConfig(),
                dropZoneEnabled: false,          // 禁止点击预览区域进行文件上传操作
                maxFileCount: 1,                    // 最大上传为 1
                maxFileSize: 51200,
                otherActionButtons:'<button type="button" class="kv-file-down btn btn-xs btn-default"  onclick="download()" title="下载附件"><i class="fa fa-cloud-download"></i></button>',
                showUpload: false,             // 不显示上传按钮，选择后直接上传
                previewClass:"uploadPreview",
                layoutTemplates: {
                    actionUpload: '',//去除上传预览缩略图中的上传图片
                    //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                    //actionDownload:'' //去除上传预览缩略图中的下载图标
                    actionDelete: '', //去除上传预览的缩略图中的删除图标
                }
            })
            .on("change", function() {
                // 清除掉上次上传的图片
                //   $(".uploadPreview").find(".file-preview-frame:first").remove();
                //    $(".uploadPreview").find(".kv-zoom-cache:first").remove();
            })
            .on("filebatchselected", function(e, files) {
                $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
            })
            .on("fileuploaded", function(e, data, previewiId, index) {       // 上传完成后的处理
                var form = data.form,
                    files = data.files,
                    extra = data.extra,
                    response = data.response,        // 响应
                    reader = data.reader;          // 文件对象

                if (response.code == "0") {
                    $("#fileName").val(response.originalFilename)
                    $("#filePath").val(response.url)
                    var img = new Image();     // 这里上传的是图片，对图片处理获取图片的分辨率
                    img.src = response.url;
                    if (img.complete) {
                        $(this).attr("data-displayReso", img.width + "*" + img.height);
                    } else {
                        img.onload = function() {
                            $(this).attr("data-displayReso", img.width + "*" + img.height);
                        };
                    }
                }
            });
        //-----------------图片上传end
    });


    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-device-edit').serialize());
        }
    }

    //图片上传
    function download(){
        //     window.location.href =fileUrl
        var elelink = document.createElement("a");
        elelink.style.display = 'none';
        elelink.target = '_blank';
        elelink.href =  $("#filePath").val();
        elelink.download =  $("#fileName").val();
        document.body.appendChild(elelink);
        elelink.click();
        document.body.removeChild(elelink);

    }
</script>
</body>
</html>
